<template>
    <div class="pages-container">
      <!-- 数据统计 / 待办事项 -->
      <div class="panel-container">
        <div class="data-container">
          <!-- 用户数据统计 / 今日用户注册 / 近七天用户 / 近三十天用户 / 近一年用户 / 用户总量 -->
          <div class="panel-box">
            <!-- <div class="panel-title">用户数据概况</div> -->
            <div class="panel-content">
              <div class="item" :class="item.theme" v-for="(item, index) in userPanel" :key="index">
                <div class="xh-info">
                  <div class="xh-text">{{ item.title }}</div>
                  <div class="xh-num" v-number-scroll="item.num" :data-number-scroll-duration="item.duration"></div>
                  <div class="xh-desc">非实时数据，仅供参考</div>
                </div>
                <div class="xh-icon-box">
                  <img :src="item.icon" class="xh-icon" alt="">
                </div>
              </div>
            </div>
          </div>
          <!-- 订单数据统计 / 今日营业额 / 近七天营业额 / 近三十天营业额 / 近一年营业额 / 总营业额 -->
          <div class="panel-box panel-order">
            <!-- <div class="panel-title">订单数据概况</div> -->
            <div class="panel-content">
              <div class="item" :class="item.theme" v-for="(item, index) in orderPanel" :key="index">
                <div class="xh-info">
                  <div class="xh-text">{{ item.title }}</div>
                  <div class="xh-num" v-number-scroll="item.num" :data-number-scroll-duration="item.duration"></div>
                  <div class="xh-desc">非实时数据，仅供参考</div>
                </div>
                <div class="xh-icon-box">
                  <img :src="item.icon" class="xh-icon" alt="">
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 快捷操作 -->
        <div class="action-container">
          <div class="action-title">快捷操作</div>
          <!-- 快捷操作 / 待审核提现 / 举报反馈 / 提现设置 / 系统设置 / 用户协议 / 关于我们 / 客服设置 / 发券协议 / 帮助中心 / 常见问题 / 添加产品  -->
          <div class="action-list">
            <div class="item" v-for="(item, index) in actionList" :key="index" @click="hanldClick(item)">
              <!-- <img :src="item.icon" class="xh-icon" alt=""> -->
              <AppIcons :icon="item.icon" size="26" color="#666666" />
              <div class="xh-text">{{ item.text }}</div>
              <div class="xh-hot" v-if="item.num > 0">{{ item.num }}</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 数据图表 / 最新领取 -->
      <div class="echart-coupon-container">
        <!-- 数据图表 -->
        <div class="echart-container">
          <div class="echart" ref="echartRef"></div>
        </div>
        <!-- 最新领取 -->
        <div class="coupon-container">
          <div class="coupon-title">最新领取</div>
          <div class="coupon-content">
            <div class="item" v-for="(item, index) in 30" :key="index">
              <div class="label">楚羽幽领券{{ index }}张</div>
              <div class="value">10分钟</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
    
  <script>
  export default {
    data() {
      return {
        actionList: [
          {
            path: '/Settings/settings',
            query: {
              group: 'system',
            },
            text: '系统设置',
            query: {
              group: 'system',
            },
            num: 0,
            icon: 'Setting',
          },
          {
            path: '/Settings/settings',
            text: '提现设置',
            query: {
              group: 'withdrawal',
            },
            num: 0,
            icon: 'Sell',
          },
          {
            path: '/Withdrawal/index',
            text: '提现管理',
            query: {
            },
            num: 15,
            icon: 'Wallet',
          },
          {
            path: '/Report/index',
            text: '举报反馈',
            query: {
            },
            num: 38,
            icon: 'Promotion',
          },
          {
            path: '/Tags/edit',
            text: '客服设置',
            query: {
              tag_name: 'service_contact'
            },
            num: 0,
            icon: 'Headset',
          },
          {
            path: '/Tags/edit',
            text: '常见问题',
            query: {
              tag_name: 'problem_help'
            },
            num: 0,
            icon: 'Tickets',
          },
          {
            path: '/Tags/edit',
            text: '用户协议',
            query: {
              tag_name: 'problem_help'
            },
            num: 0,
            icon: 'Document',
          },
          {
            path: '/Tags/edit',
            text: '隐私协议',
            query: {
              tag_name: 'user_yinsi_xieyi'
            },
            num: 0,
            icon: 'Document',
          },
          {
            path: '/Articles/index',
            text: '帮助中心',
            query: {
            },
            num: 0,
            icon: 'QuestionFilled',
          },
          {
            path: '/CouponRecord/add',
            text: '添加产品',
            query: {},
            num: 0,
            icon: 'Present',
          },
        ],
        userPanel: [
          {
            title: '今日用户注册',
            num: 100,
            duration: 500,
            icon: '/static/image/today.png',
          },
          {
            title: '近七天用户',
            num: 100,
            duration: 800,
            icon: '/static/image/week.png',
          },
          {
            title: '近三十天用户',
            num: 100,
            duration: 1000,
            icon: '/static/image/month.png',
          },
          {
            title: '用户总量',
            num: 100,
            duration: 1500,
            icon: '/static/image/users.png',
          }
        ],
        orderPanel: [
          {
            title: '今日营业额',
            icon: '/static/image/today.png',
            num: 10000,
            duration: 1000,
            theme: 'blue',
          },
          {
            title: '近七天营业额',
            icon: '/static/image/week.png',
            num: 10000,
            duration: 1300,
            theme: 'yellow',
          },
          {
            title: '近三十天营业额',
            icon: '/static/image/month.png',
            num: 10000,
            duration: 1500,
            theme: 'purple',
          },
          {
            title: '总营业额',
            icon: '/static/image/money.png',
            num: 10000,
            duration: 1800,
            theme: 'green',
          }
        ],
        echartOptions: {
          title: {
            text: '数据图表'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: [
              '用户增涨',
              '平台营业额',
            ]
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['今日', '本周', '本月', '季度内', '半年内', '今年']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              'name': '用户增涨',
              'type': 'line',
              'stack': 'Total',
              'smooth': true,
              'data': [
                5,
                10,
                20,
                30,
                50,
                100,
              ],
            },
            {
              'name': '平台营业额',
              'type': 'line',
              'stack': 'Total',
              'smooth': true,
              'data': [
                5,
                10,
                20,
                30,
                50,
                100,
              ],
            }
          ]
        }
      };
    },
    created() {
      this.$nextTick(() => {
        const echats = this.$echarts.init(this.$refs.echartRef);
        echats.setOption(this.echartOptions);
      });
    },
    methods: {
      hanldClick(item) {
        const appid = this.$siteApp.useAppId;
        this.$router.push({
          path: item.path,
          query: {
            appid: appid,
            isBack: 1,
            ...item?.query ?? {}
          },
        });
      },
    },
  };
  </script>
    
  <style lang="scss" scoped>
  .pages-container {
    height: 100%;
    display: flex;
    flex-direction: column;
  
    .panel-container {
      display: flex;
      gap: 15px;
  
      .data-container {
        flex: 1;
        display: flex;
        flex-direction: column;
  
        .panel-order {
          margin-top: auto;
        }
  
        .panel-box {
          .panel-title {
            font-size: 18px;
            font-weight: 700;
          }
  
          .panel-content {
            display: flex;
            gap: 20px;
  
            .item {
              width: 100%;
              display: flex;
              flex-direction: row;
              // align-items: center;
              // user-select: none;
              // border-radius: 6px;
              // background-size: 100% 100%;
              background: #fff;
              padding: 13px 0;
  
              .xh-icon-box {
                padding: 0 15px;
                display: flex;
                align-items: center;
  
                .xh-icon {
                  width: 60px;
                  height: 60px;
                }
              }
  
              .xh-info {
                flex: 1;
                // text-align: center;
                padding: 15px 0 15px 15px;
  
                .xh-num {
                  padding-top: 5px;
                  font-size: 2.1rem;
                  color: rgb(51, 51, 51);
                  margin: 10px 0;
                }
  
                .xh-text {
                  font-size: 16px;
                }
  
                .xh-desc {
                  color: rgb(153, 153, 153);
                  font-size: 12px;
                }
              }
            }
          }
        }
      }
  
      .action-container {
        width: 450px;
        background: #fff;
  
        .action-title {
          font-size: 16px;
          font-weight: 700;
          margin-bottom: 10px;
          padding: 15px;
        }
  
        .action-list {
          display: flex;
          flex-wrap: wrap;
          gap: 15px;
          padding: 0 15px 15px 15px;
  
          .item {
            width: calc(25% - 15px);
            font-size: 14px;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 15px 0;
            position: relative;
            background: #f1f1f1;
            border-radius: 4px;
            overflow: hidden;
            user-select: none;
  
            .xh-icon {
              width: 30px;
              height: 30px;
            }
  
            .xh-text {
              color: #333;
              padding-top: 5px;
            }
  
            .xh-hot {
              position: absolute;
              left: 0;
              top: 0;
              background: rgba(255, 0, 0, 0.4);
              padding: 3px 6px;
              color: #fff;
              font-size: 12px;
              border-radius: 4px;
            }
  
            &:hover {
              background: #e8e8e8;
            }
          }
        }
      }
    }
  
    .echart-coupon-container {
      flex: 1;
      display: flex;
      gap: 15px;
      margin-top: 15px;
      overflow: hidden;
  
      .echart-container {
        flex: 1;
        background: #fff;
        padding: 15px;
        overflow: hidden;
  
        .echart {
          width: 100%;
          height: 100%;
        }
      }
  
      .coupon-container {
        width: 450px;
        height: 100%;
        background: #fff;
        overflow: hidden;
        display: flex;
        flex-direction: column;
  
        .coupon-title {
          font-size: 16px;
          font-weight: 700;
          padding: 15px;
        }
  
        .coupon-content {
          flex: 1;
          display: flex;
          flex-direction: column;
          overflow-x: hidden;
          overflow-y: auto;
          padding: 0 15px 15px 15px;
  
          .item {
            display: flex;
            justify-content: space-between;
            padding: 15px 0;
            font-size: 14px;
            border-bottom: 1px dashed #e8e8e8;
  
            .label {
              color: #333;
            }
  
            .value {
              color: #999;
            }
          }
        }
      }
    }
  }
  </style>
    